<template>
  <div class="body">
    <el-row>
      <el-col :span="12" :offset="6">
        <div style="margin-top: 100px">
          <el-container>
            <el-container>
              <el-aside width="65px" class="aside">
                <el-avatar
                  class="avatar"
                  shape="square"
                  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                ></el-avatar>
                <Sidebar ref="sidebar" :items="sidebars"> </Sidebar>
              </el-aside>
              <el-main>
                <router-view />
              </el-main>
            </el-container>
          </el-container>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Sidebar from "@/components/Sidebar";
export default {
  data() {
    return {
      sidebars: [
        {
          id: 1,
          title: "聊天",
          icon: "el-icon-chat-dot-round",
          to: "Chats",
          badge: true,
        },
        {
          id: 2,
          title: "好友",
          icon: "el-icon-user-solid",
          to: "Friend",
        },
        {
          id: 3,
          title: "群组",
          icon: "el-icon-s-custom",
          to: "#",
        },
      ],
    };
  },
  watch: {
    // eslint-disable-next-line no-unused-vars
    $route(to, from) {
      let index = to.meta.sidebarIndex;
      if (this.$refs.sidebar && index >= 0) {
        this.$refs.sidebar.selectIndex(index);
      }
    },
  },
  components: {
    Sidebar,
  },
};
</script>

<style  scoped>
.aside {
  height: 620px;
  background-color: #000;
  border-right: solid 1px #e6e6e6;
  text-align: center;
}
.avatar {
  margin-top: 10px;
}
.el-menu {
  border-right: 0;
}
.el-main {
  padding: 0;
}
</style>